<template>
	<view class="steps">
		<view class="main">
			<view class="one">
				<view class="circle">1</view>
				<view class="s-line"></view>
			</view>
			<text>{{ titles[0].name }}</text>
		</view>
		<view class="main">
			<view class="two">
				<view class="circle" :class="{noActive : isActive < 2}">2</view>
				<view class="s-line" :class="{noActive : isActive < 2}" v-show="isActive >= 2"></view>
				<view class="d-line" :class="{noActive : isActive < 2}" v-show="isActive < 2"></view>
			</view>
			<text :class="{noActive : isActive < 2}">{{ titles[1].name }}</text>
		</view>
		<view class="main">
			<view class="three">
				<view class="circle" :class="{noActive : isActive < 3}">3</view>
				<view class="s-line" :class="{noActive : isActive < 3}" v-show="isActive >= 3"></view>
				<view class="d-line" :class="{noActive : isActive < 3}" v-show="isActive < 3"></view>
			</view>
			<text :class="{noActive : isActive < 3}">{{ titles[2].name }}</text>
		</view>
		<view class="main">
			<view class="four">
				<view class="circle" :class="{noActive : isActive < 4}">4</view>
				<view class="s-line" style="background-color: transparent;"></view>
			</view>
			<text :class="{noActive : isActive < 4}">{{ titles[3].name }}</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// isActive: 1
			}
		},
		props: {
			titles: {
				type: Array
			},
			isActive: {
				type: Number,
				default: 1
			}
		},
		components: {
			
		},
		onLoad() {

		},
		methods: {
			
		},
	}
</script>

<style lang="scss">
	.steps {
		display: flex;
		align-items: center;
		// padding: 60rpx 67rpx 0;
		justify-content: center;
		padding-top: 60rpx;
		padding-left: 120rpx;
		.main {
			position: relative;
			.one,.two,.three,.four {
				display: flex;
				align-items: center;
			}
			text {
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #000;
				position: absolute;
				left: -22rpx;
				top: 68rpx;
			}
			.s-line {
				width: 119rpx;
				height: 4rpx;
				background-color: #fff;
			}
			.d-line {
				width: 119rpx;
				border: 2rpx dashed #fff;
			}
			.circle {
				width: 56rpx;
				height: 56rpx;
				background-color: #fff;
				border-radius: 50%;
				text-align: center;
				line-height: 56rpx;
				font-size: 34rpx;
			}
			.noActive {
				opacity: .5;
			}
			
		}
		
	}
	
</style>
